<template>
  <img class="user_pic" :src="commentItem.userPicUrl==null?require('@/assets/img/avatar.png'):commentItem.userPicUrl" alt="">
  <div>
    <strong>{{ commentItem.userNickname }}</strong>
    <p>{{ commentItem.commentContent }}</p>
    <span>
        <small>发布时间 : {{ date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'}}</small>
        <small @click="commentTA" style="cursor:pointer">&nbsp; 回复TA</small>
        <!-- <small style="cursor:pointer">&nbsp; 删除我的评论</small> -->
    </span>
  </div>
  <div style="padding:20px 40px">
        <sub-comment-component :subCommentItem="subCommentItem" 
        v-for="subCommentItem in commentItem.subComment" :key="subCommentItem.commentId"/>
    </div>
  <el-divider border-style="dotted" />
  <br>
</template>

<script>
import SubCommentComponent from './SubCommentComponent.vue'
export default {
  components: { SubCommentComponent },
  props:{
    commentItem:Object,
    commentTACallback:Function
  },
  data(){
    return{
      date:new Date(this.commentItem.commentDate)
    }
  },
  methods:{
    commentTA(){
      this.commentTACallback({
        userId:this.commentItem.commentUserId,
        nickName:this.commentItem.userNickname,
        content:this.commentItem.commentContent,
        commentId:this.commentItem.commentId
      })
    }
  }
}
</script>

<style scoped>
.user_pic{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
    float: left;
}
</style>